<template>
  <div class="index">
    <el-container>
      <!-- 头部区域 -->
      <el-header class="header themeBgColor">
        <div class="title" >后台管理系统</div>
        <div class="operate">
          <el-tooltip class="item" effect="dark" content="网站置灰" placement="bottom">
            <i
              class="el-icon-table-lamp"
              style="font-size:24px;color:#f0f0f0;margin-right:15px;"
              @click="setWebFilter"
            ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="打开引导" placement="bottom">
            <i
              class="el-icon-guide"
              style="font-size:24px;color:#f0f0f0;margin-right:15px;"
              @click="openGuide"
            ></i>
          </el-tooltip>
          <!-- 我是使用的iconfont图标 -->
          <i class="iconfont icon-quanping screen" v-if="!isFullscreen" @click="toggleFullscreen"></i>
          <i class="iconfont icon-guanbiquanping screen" v-else @click="toggleFullscreen"></i>
          <el-popover placement="bottom-end" width="150" trigger="hover">
            <div class="popoverItem">
              <el-button type="text" style="color:#333;font-size:14px;" @click="quit">退出登录</el-button>
            </div>
            <img slot="reference" class="avatar" src="../../assets/imgs/avatar.jpg" alt />
          </el-popover>
        </div>
      </el-header>
      <el-container>
        <!-- 侧边栏区域 -->
        <Nav ref="nav"></Nav>
        <!-- 主体区域 -->
        <el-main class="main">
          <!-- 面包屑 -->
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                <router-link to="/home">首页</router-link>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="item in routeList" :key="item.path">
                <router-link :to="item.path">{{item.meta.title}}</router-link>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- 内容展示区域 -->
          <div class="mainContent">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
    <!-- 引入引导页组件 -->
    <guide ref="guide"></guide>
	
  </div>
</template>
<script>
import Nav from "./components/nav/Nav";
import guide from "./components/guide";
// import websocket from "@/common/js/websocket";
export default {
  // mixins:[websocket],
  data() {
    return {
      routeList: [], //面包屑 - 路由列表
      isFullscreen: false, // 是否开启全屏显示
    };
  },
  components: {
    Nav,
    guide,
  },
  watch: {
    // 监听路由
    $route() {
      this.getRouteList();
	  
	  
    },
  },
  created() {
	  setInterval(()=>{
		  this.lodeCount()
	  },1000)
    this.getRouteList();
	// this.connectWebSocket()
    // 监听事件
    window.addEventListener("resize", this.onresize);
    window.addEventListener("keydown", this.keydown);
  },
  beforeDestroy() {
    // 取消监听事件
    window.removeEventListener("resize", this.onresize);
    window.removeEventListener("keydown", this.keydown);
  },
  methods: {
	  playAudio(){
		  const audioPlayer = this.$refs.audioPlayer;
		        // audioPlayer.load(); // 重新加载音频流以播放新的音频文件
		        audioPlayer.play(); // 播放音频
	  },
	// 消除押金数量
	lodeCount(){
		  this.$post('/index/removeDepListCount',{},res=>{
			  let result = res.data.data
			  let url
			  if(result.list_dep){
				  url = 'https://jbk.maoyishiji.com/static/depCheck.wav'
			  }else if(result.list_fix_price){
				  url = 'https://jbk.maoyishiji.com/static/fixPrice.wav'
			  }
			   if(url){
				   let audioElement = new Audio(url);
				      audioElement.play();
			   }
		  })
	},
    // 获取路由列表
    getRouteList() {
      let arr = this.$route.matched;
      this.routeList = arr.filter((val) => {
        return val.path != "/home" && val.path != "/index";
      });
    },
    // 网站置灰
    setWebFilter() {
      let webFilter = document.documentElement.style.filter;
      if (webFilter) {
        document.documentElement.style.filter = "";
      } else {
        document.documentElement.style.filter = "grayscale(100%)";
      }
    },
    // 打开引导页
    openGuide() {
      this.$refs.guide.guide();
    },
    // 全屏切换
    toggleFullscreen() {
      if (!this.$screenfull.isEnabled) {
        this.$message({
          message: "您的浏览器不能全屏",
          type: "warning",
        });
        return false;
      }
      this.$screenfull.toggle();
      this.isFullscreen = !this.isFullscreen;
    },

    // F11默认事件
    keydown(event) {
      if (event.keyCode === 122) {
        this.isFullscreen = !this.isFullscreen;
      }
    },

    /**
     * 响应屏幕变化事件，给isFullscreen赋值，标识是否全屏
     * IE中bug: 调试器打开，且与页面不分离时 -- 无效
     * **/
    onresize(event) {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      let winFlag = window.innerHeight === window.screen.height;
      // 利用window全屏标识来判断 -- IE无效
      let isFull = window.fullScreen || document.webkitIsFullScreen;

      if (isFull === undefined) {
        this.isFullscreen = winFlag;
      } else {
        this.isFullscreen = winFlag || isFull;
      }
    },

    // 退出登录
    quit() {
      this.$router.replace("/login");
      sessionStorage.removeItem("userName");
      localStorage.removeItem("closeGuide");
    },
    // 操作菜单栏
    handleMenu() {
      this.$refs.nav.handleMenu();
    },
  },
};
</script>
<style scoped>
.index {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
  color: #fff;
}
.operate {
  display: flex;
  align-items: center;
}
.screen {
  font-size: 24px;
  color: #f0f0f0;
  margin-right: 15px;
  font-weight: bold;
  cursor: pointer;
}
.popoverItem {
  width: 100%;
  text-align: center;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-top: 4px;
}
.main {
  width: 100%;
  height: calc(100vh - 60px);
  overflow-y: scroll;
  padding: 0px;
  box-sizing: border-box;
}
.breadcrumb {
  width: 100%;
  margin-top: 14px;
  padding: 0px 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  box-sizing: border-box;
}
.mainContent {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
</style>